<template>
  <div class="user-wraper user-page container" v-if="state">
    <div class="logo">
      <router-link to="/">
        <el-image :src="siteInfo.pc_logo_url || ''" fit="cover"></el-image>
      </router-link>
    </div>
    <el-row>
      <div class="login-left">
        <img src="@/assets/images/public/userLoginLeft.png" alt />
      </div>
      <div class="thirdlogin">
        <div class="tips">手机号绑定</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" class="demo-ruleForm">
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="ruleForm.phone"
              placeholder="请输入手机号"
              @input="handlePhoneChange('ruleForm')"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verify">
            <el-input placeholder="请输入验证码" v-model="ruleForm.verify">
              <template slot="append">
                <EduVerificationCode
                  @start="getVerifyCode('ruleForm')"
                  :disabled="btnDisabled"
                ></EduVerificationCode>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="btn"
              @click="submitForm('ruleForm')"
              :loading="disabledButton"
              >确定</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-row>
  </div>
</template>

<script>
import EduVerificationCode from '@/components/EduVerificationCode'
import projectSetting from '@/settings/projectSetting.js'
import { mapGetters } from 'vuex'
export default {
  components: {
    EduVerificationCode
  },
  data() {
    // 手机号码的校验
    var testPhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!this.$util.mobile(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    return {
      state: false,
      ruleForm: {
        type: this.$route.query.state,
        oauth: '',
        phone: '',
        verify: ''
      },
      rules: {
        phone: [{ validator: testPhone, trigger: 'blur' }],
        verify: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }
        ]
      },
      btnDisabled: true,
      disabledButton: false
    }
  },
  computed: {
    ...mapGetters({
      siteInfo: 'projectSetting/getGlobSiteInfo',
      isLogin: 'user/isLogin'
    })
  },
  created() {
    this.handleData()
  },
  methods: {
    handleData() {
      this.$api.getConfigThirdloginCheck(
        {
          type: this.ruleForm.type,
          code: this.$route.query.code,
          redirect_uri: projectSetting.globLocalHost + '/thirdlogin'
        },
        res => {
          let data = res.data
          // 已登录
          if (this.isLogin) {
            this.$api.createConfigThirdloginBind(
              {
                type: this.$route.query.state,
                oauth: data.oauth
              },
              res => {
                this.$message.success(res.msg)
                this.$store.dispatch('user/userInfo')
                this.$router.push({
                  path: '/my/profile/thirdlogin'
                })
              },
              error => {
                this.$message.error(error.msg)
                this.$router.push({
                  path: '/my/profile/thirdlogin'
                })
              }
            )
          } else {
            if (data.has_bind == 1) {
              // 已绑定
              this.$store.dispatch('user/thirdlogin', data.user)
              this.$router.push({
                path: '/'
              })
            } else {
              this.state = true
              this.ruleForm.oauth = data.oauth
            }
          }
        },
        error => {
          this.$message.error(error.msg)
        }
      )
    },
    submitForm(formName) {
      let that = this
      that.$refs[formName].validate(valid => {
        if (valid) {
          this.disabledButton = true
          this.$api.createConfigThirdloginBind(
            {
              ...that.ruleForm
            },
            res => {
              that.$message.success(res.msg)
              this.$router.push({
                path: '/'
              })
              this.$store.dispatch('user/thirdlogin', res.data)
              this.disabledButton = false
            },
            error => {
              that.$message.error(error.msg)
              this.disabledButton = false
            }
          )
        } else {
          return false
        }
      })
    },
    handlePhoneChange(formName) {
      var that = this
      that.$refs[formName].validateField('phone', valid => {
        if (!valid) {
          this.btnDisabled = false
        } else {
          this.btnDisabled = true
          return false
        }
      })
    },
    // 获取验证码
    getVerifyCode(formName) {
      var that = this
      that.$refs[formName].validateField('phone', valid => {
        if (!valid) {
          this.btnDisabled = false
          this.$api.createSmsVerify(
            {
              phone: that.ruleForm.phone,
              type: 'bind_' + this.$route.query.state
            },
            res => {
              that.$message.success(res.msg)
            },
            error => {
              that.$message.error(error.msg)
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-page {
  min-height: 100vh;
  padding-top: 8vh;
  box-sizing: border-box;
  background-color: #fff;
  .login-left {
    float: left;
    padding-top: 45px;
  }
  .logo {
    margin-bottom: 9vh;
    background-image: url('../../../assets/images/public/cicle.png');
    background-repeat: no-repeat;
    min-height: 95px;
    padding-top: 22px;
    padding-left: 69px;
    box-sizing: border-box;
    .el-image {
      height: 39px;
      width: 164px;
    }
  }
}
.thirdlogin {
  float: right;
  width: 340px;
  padding: 45px 70px;
  margin-top: 100px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 7px 21px 0px rgba(0, 0, 0, 0.08);
  .tips {
    text-align: center;
    @include edu-color-auxiliary;
    margin-bottom: 52px;
    font-size: 15px;
    font-weight: 500;
    line-height: 21px;
  }
  .tab {
    border-bottom: 2px solid #e4e7ed;
    .item {
      padding: 8px 0;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-auxiliary;
      border-bottom: 2px solid transparent;
      margin-bottom: -2px;
      &.active {
        @include edu-color-auxiliary;
        @include edu-color-primary(border-color);
      }
    }
  }
  .el-form {
    .el-input-group__append {
      color: #fff;
      @include edu-color-primary(border-color);
      @include edu-color-primary(background-color);
    }
    .btn {
      width: 100%;
      margin-top: 50px;
    }
  }
}
</style>
